<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- Your app title -->
  <title>Mocks</title>
  <link rel="stylesheet" href="/css/index.css">
  <style>

  </style>
</head>
<body>
<div id="app">
  <div class="div-imput">
    <span class="span">服务器地址</span>
    <input type="text" class="input" id="base" placeholder="示例：http://aw.jnaw.top/aw"
           oninput="baseUpdate()">
  </div>
  <div class="div-imput">
    <span class="span">请求次数&nbsp;&nbsp;&nbsp;</span>
    <input type="number" class="input" id="number" value="1"
           oninput="numberUpdate()">
  </div>
  <div class="div-imput">
    <span class="span">测试接口：<%= api %></span>
  </div>
  <div>
    <div id="show_data" class="pre-div"></div>
  </div>
  <div class="div-imput" id="show_div">
    <button type="button" class="button" onclick="save()">测试服务器</button>
  </div>
  <!--<div>
    <span id="post_span">接口发送数据：</span>
    <div id="post_data" class="pre-div"></div>
  </div>
  <div>
    <span id="get_span">接口返回数据：</span>
    <div id="get_data" class="pre-div"></div>
  </div>-->
</div>
<!-- Path to Framework7 Library JS-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="/js/utils.js"></script>
<script>
  var api = '';
  var action = '';
  $(function () {
    var base = localStorage.getItem('baseURL');
    if (base) {
      $('#base').val(base);
    }
    var number = localStorage.getItem('number');
    if (number) {
      $('#number').val(number);
    }
    api = '<%= api %>';
    action = '<%= action %>';
    getHtml();
  });
  function getHtml() {
    axiosFun('/getHtml', 'POST', {
      action: action,
      api: api,
    }, function (res) {
      var data = res.data || {};
      var html = data.html || '';
      $('#show_data').html(html);
    });
  }

  function save() {
    var base = $('#base').val().trim();
    if (!base) {
      alert('请填写服务器地址');
      return false;
    }
    var number = $('#number').val().trim();
    if (!number) {
      alert('请填写请求次数');
      return false;
    }
    localStorage.setItem('baseURL', base)
    localStorage.setItem('number', number)

    axiosFun('/post', 'POST', {
      base: base,
      api: api,
      number: number,
    }, function (res) {
      var data = res.data || {}
      var post_data = data.postData || []
      var get_data = data.getData || []
      $('.remove').remove();
      for (var k in post_data) {
        var html = `
        <div class="margin-top-15 remove">
          <span id="post_span">接口发送数据：</span>
          <div id="post_data" class="pre-div">` + post_data[k] + `</div>
        </div>
        <div class="remove">
          <span id="get_span">接口返回数据：</span>
          <div id="get_data" class="pre-div">` + get_data[k] + `</div>
        </div>
        `;
        $('#show_div').append(html);
      }
    });
  }

</script>
</body>
</html>